﻿@model MusicStore.Domain.POCO.Genre
@{
    ViewBag.Title = "Store - Index";
    
}
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

 <script type="text/javascript">
        google.load('visualization', '1.1', { packages: ['controls'] });
    </script>
<script type="text/javascript">
    function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string','Genres');
        data.addColumn('number','Albums');
            
         data.addRows(@Html.Raw(Json.Encode(ViewBag.ListGenre)));

         //Creates a Dashboard
          var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
          var dashboard1 = new google.visualization.Dashboard(document.getElementById('dashboard1_div'));
         // Create a genre slider, passing some options
        var albumSlider = new google.visualization.ControlWrapper({
          'controlType': 'NumberRangeFilter',
          'containerId': 'filter_div',
          'options': {
            'filterColumnLabel': 'Albums'
            
          }
        });         
        // Creates a barchart with some options
        var barChart = new google.visualization.ChartWrapper({
          'chartType': 'BarChart',
          'containerId': 'barchart_div',
          'options': {
            //'title': 'Albums per genre'
            'width': 300,
            'height': 300,
            'legend': 'right'
          }
        });
          // Creates a linechart with some options
        var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'linechart_div',
          'options': {
            //'title': 'Albums per genre'
            'width': 300,
            'height': 300,
            //'curveType': 'function',
            'legend': 'right'
          }
        });
        //Connects a dashboard with the charts
        dashboard.bind(albumSlider, barChart);
        dashboard1.bind(albumSlider, lineChart);
        
        //Draw the dashboard
        dashboard.draw(data);
        dashboard1.draw(data);
        /* Code without the filter:
        new google.visualization.BarChart(document.getElementById('visualization')).
            draw(data,
                 { title: "Albums per genre",
                   width: 600, 
                   height: 400,
                     
                 }
            );
            new google.visualization.LineChart(document.getElementById('linevisualization')).
            draw(data,
                 {curveType: "function",
                 title: "Albums per genre",
                 width: 600, 
                 height: 400,
                     
                 }
            );*/
    
    }

    google.setOnLoadCallback(drawVisualization);
</script>
<h3>
    Brows Genres</h3>
<p>
    Selecteer uit @ViewBag.ListGenres.Count genres:</p>
<ul>
    @foreach (var genre in ViewBag.ListGenres)
    {
        <li>@Html.ActionLink((string)genre.Name, "Browse", new { genre = genre.Name })</li>
    }
</ul>
<p>
    <img src="../../output.png" ImageUrl= alt="FAIL" /></p>
<div id="dashboard_div">
    <div id="filter_div"></div>
    <div id="barchart_div" style="width: 600px; height: 400px;">
    </div>
    
</div>
<div id="dashboard1_div">
    <div id="filter_div"></div>
    <div id="linechart_div" style="width: 600px; height: 400px;">
    </div>
    
</div>
</body> 